import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';

@Component({
  selector: 'ngx-chartjs-radar',
  template: `
    <chart type="radar" [data]="data" [options]="options"></chart>
  `,
})
export class ChartjsRadarComponent implements OnDestroy {

  data: any;
  options: any;
  themeSubscription: any;

  constructor(private theme: NbThemeService) {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;

      this.data = {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
        datasets: [{
          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
          label: 'Series A',
          borderColor: colors.danger,
          backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5)
        }, {
          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
          label: 'Series B',
          borderColor: colors.warning,
          backgroundColor: NbColorHelper.hexToRgbA(colors.warningLight, 0.5)
        }]
      };

      this.options = {
        maintainAspectRatio: false,
        responsive: true,
        scaleFontColor: 'white',
        legend: {
          labels: {
            fontColor: chartjs.textColor
          }
        },
        scale: {
          pointLabels: {
            fontSize: 14,
            fontColor: chartjs.textColor
          },
          gridLines: {
            color: chartjs.axisLineColor
          },
          angleLines: {
            color: chartjs.axisLineColor
          }
        }
      };
    })
  }

  private random(): number {
    return Math.round(Math.random() * 100);
  }

  ngOnDestroy() {
    this.themeSubscription.unsubscribe();
  }
}
